<template>
  <div>
    <div><!-- 用户信息 -->
      <van-cell-group inset>
        <van-row>
        <van-col span="18">
      <van-cell @click="showIt()" >
        <van-row>
        <van-col span="6">
          <!-- 头像 -->
          <van-image
          round
          width="3rem"
          height="3rem"
          :src="this.ItuserIcon"
          />   
        </van-col>
        <van-col span="18">
          <p class="name">{{this.ItuserName}} </p>
          <!-- <p >{{this.ItuserId}}</p> -->
        </van-col>
        <!-- <van-col span="6">
         
        </van-col> -->
      </van-row>
      </van-cell>
      </van-col >

        <van-col span="6">
         <!-- <van-button v-if="!this.ItisFollow" type="info" size="small"   round @click="followIt()">关注</van-button>
          <van-button v-if="this.ItisFollow"  type="info" size="small"  round @click="followIt()">取消关注</van-button>  -->
          <van-icon size="1.8rem" v-if="this.ItisFollow" @click="followIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/x_%E5%85%B3%E6%B3%A82%20%281%29.png"></van-icon>
          <van-icon size="1.8rem" v-if="!this.ItisFollow" @click="followIt()" name="http://rul4y8e5f.hn-bkt.clouddn.com/x_%E5%85%B3%E6%B3%A82.png"></van-icon>
        </van-col >
        </van-row>
        
    </van-cell-group>
    


    </div>

  </div>
</template>

<script>
import FollowAPI from '@/api/FollowAPI'
export default {
 name: 'UserPage2List',



  data() {
    return {
     
     // 是否关注，默认为否
      ItisFollow: false,
    }
  },

  created(){
  this.ornotfollowIt()
 },

methods:{


  showIt(){
    // this.$toast(6666)
    this.$router.push({name: "user2BlogList",
          params:{
            id: this.ItuserId
          }
    })
    // this.$router.go(0)
  },

    // 关注、取消用户
    followIt(){
      var result = FollowAPI.Follow(this.ItuserId,this.ItisFollow)
      // var result = FollowAPI.Follow(18,this.ItisFollow)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.$toast(val.data)
          // this.$router.go(0)
          // console.log(this.musicUploadDTO.musicIcon);
          this.ornotfollowIt()
        }else{
          this.$toast(val.errorMsg)
        }
            })
    },

    // 是否关注
    ornotfollowIt(){
      var result = FollowAPI.IsFollow(this.ItuserId)
      // var result = FollowAPI.IsFollow(18)
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.ItisFollow = val.data
          // this.$toast(this.ItisFollow)
           console.log(this.ItisFollow)
          // console.log(this.musicUploadDTO.musicIcon);
        }else{
          this.$toast(val.errorMsg)
        }
            })
    }
},

props:{
  ItuserId: {
      required: true,
      type: String
    },
    ItuserName: {
      required: true,
      type: String
    },
    ItuserIcon: {
      required: true,
      type: String
    },
}

}
</script>

<style scoped>
.name{
  color: #1aa4c7;
}
</style>